<template>
  <div class="outer">
    <h1>Count</h1>
    <p>被计算的值{{count}}/电影的数量{{movieList.length}}</p>
    <button @click="increment">累加</button>
    <button @click="decrement">累减</button>
    <button @click="incrementN({n:3})">加N</button>
    <button @click="waitIncrement">等两秒在加</button>
    <button @click="waitIncrementN({n:5})">等两秒在加N</button>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex';
export default {
  name: "Count",
  data() {
    return {};
  },
  computed:{
    ...mapState("count",["count"]),
    ...mapState("movie",["movieList"])
  },
  methods:{
    ...mapMutations("count",["increment","decrement","incrementN"]),
    ...mapActions("count",["waitIncrement","waitIncrementN"])
  }
  // mounted(){
  //   console.log(this.$store.state);
  // }
};
</script>

<style scoped>
.outer {
  width: 300px;
  border-radius: 20px;
  display: flex;
  background-image:linear-gradient(110deg,#3cf,rgb(177, 246, 255)) ;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid rgb(0, 0, 0);
}
</style>